define.template({
    type: 'View',
    commands: {
        'js': {
            type: 'JS',
            text: '$.alert("调用声明式命令"+$1+"|"+$0);'
        },
        'ajax': {
            type: 'Ajax',
            src: 'hello/ajax?id=$0&name=$1',
            success: '$.alert($response.data.name);'
        },
        'submit': {
            type: 'Submit',
            src: 'hello/ajax?id=$0',
            success: '$.alert($response.data.name);'
        },
        'dialog': {
            type: 'Dialog',
            // src: 'hello/ajax?id=$0',
            cls: 'dlg-picker',
            title: '对话框标题',
            node: {
                type: 'View',
                node: {
                    type: 'Vertical',
                    nodes: [
                        {
                            type: 'Html',
                            text: '这是对话框的内容'
                        }
                    ]
                }
            }
        },
        'dialog2': {
            type: 'Dialog',
            // src: 'hello/ajax?id=$0',
            // cls: 'dlg-form',
            preload: 'xxx/xxx',
            title: '对话框标题',
            node: {
                type: 'View',
                node: {
                    type: 'Html',
                    text: '这是采用模板的页面'
                }
            },
        },
        'dialog3': {
            type: 'Dialog',
            // src: 'hello/ajax?id=$0',
            // cls: 'dlg-form',
            preload: 'xxx/xxx',
            title: '对话框标题222',
            cover: true,
            timeout: 3000,
            node: {
                type: 'View',
                node: {
                    type: 'Html',
                    text: 'cover效果'
                }
            },
        },
        'alert': {
            type: 'Alert',
            text: '这是提示文本'
        },
        'alert2': {
            type: 'Alert',
            text: '这是提示信息...',
            position: 'rb',
            timeout: 3000
        },
        'confirm': {
            type: 'Confirm',
            text: '您确定要删除这条记录?',
            yes: {
                type: 'JS',
                text: '$.alert("您点击的是确定");'
            },
            no: {
                type: 'JS',
                text: '$.alert("您点击的是取消");'
            }
        },
        'loading': {
            type: 'Loading',
            text: 'Loading...',
            id: 'loading',
            node: {
                type: 'Progress',
                pub: {range: '25,50,75,100'},
                nodes: [
                    {percent: 20, text: '分进度'},
                    {percent: 75, text: '总进度'}
                ]
            }
        },
        'tip': {
            type: 'Tip',
            text: '这是Tip的提示',
        },
        'menu': {
            type: 'Menu',
            nodes: [
                {text: '打开'},
                {type: 'Split'},
                {text: '剪切'},
                {text: '复制'},
                {text: '粘贴', status: 'disabled'},
                {type: 'Split'},
                {text: '属性'},
            ]
        },
        'replace': {
            type: 'Replace',
            node: {
                type: 'Button',
                id: 'replace2',
                text: '这是被替换的按钮'
            },
            target: 'replace1'
        },
        'replace2': {
            type: 'Replace',
            node: {
                type: 'Button',
                text: '这是被替换的按钮Replace2'
            },
            target: 'replace2'
        },
        'remove1': {
            type: 'Remove',
            target: 'remove1'
        },
        'before': {
            type: 'Before',
            nodes: [
                {type: 'Button', text: 'Before1'},
                {type: 'Button', text: 'Before2'},
            ],
            target: 'before'
        },
        'after': {
            type: 'After',
            nodes: [
                {type: 'Button', text: 'After1'},
                {type: 'Button', text: 'After2'},
            ],
            target: 'after'
        },
        'prepend': {
            type: 'Prepend',
            nodes: [
                {type: 'Button', text: 'Prepend1'},
                {type: 'Button', text: 'Prepend2'},
            ],
            target: 'prepend'
        },
    },
    node: {
        type: 'Vertical', nodes: [
            {type: 'Text', name: 'id', label: {text: 'ID'}, value: 'ID111'},
            {type: 'Text', name: 'name', label: {text: 'Name'}, value: 'Name222'},
            {
                type: 'ButtonBar', nodes: [
                    {text: '调用JS非声明式命令', on: {click: 'this.cmd({ type: \'JS\', text: \'alert("JS Command")\' });'}},
                    {text: '调用JS声明式命令', on: {click: 'this.cmd("js", "123", "456");'}},
                    {text: '调用Ajax', on: {click: 'this.cmd("ajax", "123", "456");'}},
                    {text: '调用Submit', on: {click: 'this.cmd("submit", "111", "222");'}},
                    {text: '调用Dialog', on: {click: 'this.cmd("dialog");'}},
                    {text: '调用Dialog2', on: {click: 'this.cmd("dialog2");'}},
                    {text: '调用Dialog3', on: {click: 'this.cmd("dialog3");'}},
                    {text: '调用Alert', on: {click: 'this.cmd("alert");'}},
                    {text: '调用Alert2', on: {click: 'this.cmd("alert2");'}},
                    {text: '调用Confirm', on: {click: 'this.cmd("confirm");$.alert("再次提示","br");'}},
                    {text: '调用原生confirm', on: {click: 'var yes=confirm("您要删除?");if(yes){$.alert("您点击确定");}'}},
                    {text: '调用Loading', on: {click: 'this.cmd("loading");'}},
                    {
                        text: '关闭Loading',
                        on: {click: 'var loading=VM(this).find("loading");if(loading){loading.close();};'}
                    },
                    {text: '调用Tip', on: {click: 'this.cmd("tip");'}},
                    {text: '调用Menu', on: {click: 'this.cmd("menu");'}},
                ]
            },
            {
                type: 'ButtonBar', nodes: [
                    {text: 'Replace:'},
                    {text: '将被替换的按钮', id: 'replace1', on: {click: 'this.cmd("replace");'}},
                    {text: '前面按钮被替换', on: {click: 'this.cmd("replace");'}},
                    {text: 'id为replace2被替换', on: {click: 'this.cmd("replace2");'}},
                ]
            },
            {
                type: 'ButtonBar', nodes: [
                    {text: 'Remove:'},
                    {text: '将被Remove的按钮', id: 'remove1', on: {click: 'this.cmd("remove1");'}},
                    {text: '将被Remove的按钮2', on: {click: 'this.remove();'}},
                ]
            },
            {
                type: 'ButtonBar', nodes: [
                    {text: 'Before:'},
                    {text: '这个按钮之前将补充按钮', id: 'before', on: {click: 'this.cmd("before");'}},
                    {
                        text: '动态补充按钮',
                        on: {click: 'var index=this.data("index");if(!index){index=0;}index++;this.before({type:"Button", text:"动态按钮"+index});this.data("index", index);'}
                    },
                ]
            },
            {
                type: 'ButtonBar', nodes: [
                    {text: 'After:'},
                    {text: '这个按钮之后将补充按钮', id: 'after', on: {click: 'this.cmd("after");'}},
                    {
                        text: '动态补充按钮',
                        on: {click: 'var index=this.data("index");if(!index){index=0;}index++;this.after({type:"Button", text:"动态按钮"+index});this.data("index", index);'}
                    },
                ]
            },
            {
                type: 'ButtonBar', nodes: [
                    {text: 'Prepend:'},
                    {text: '这个按钮nodes内部前面将补充按钮', id: 'prepend', on: {click: 'this.cmd("prepend");'}},
                    {
                        text: '动态补充按钮',
                        on: {click: 'var index=this.data("index");if(!index){index=0;}index++;this.prepend({type:"Button", text:"动态按钮"+index});this.data("index", index);'}
                    },
                ]
            },
            {
                type: 'ButtonBar', nodes: [
                    {text: 'Append:'},
                    {
                        text: '动态补充按钮',
                        on: {click: 'var index=this.data("index");if(!index){index=0;}index++;this.append({type:"Button", text:"动态按钮"+index});this.data("index", index);'}
                    },
                ]
            },
        ]
    }
});